<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue'
import { GameTwo } from '@icon-park/vue-next'
import { onMounted, ref } from 'vue'
import FPInput from '@/components/function-parameter/fp-input/Index.vue'
import FPSelect from '@/components/function-parameter/fp-select/Index.vue'
import FPInputConfig from '@/views/main/dev-tool/function-design/function-edit/config/FPInputConfig.vue'
import FPSelectConfig from '@/views/main/dev-tool/function-design/function-edit/config/FPSelectConfig.vue'
import type { FPSelectDescription } from '@/components/function-parameter/fp-select'
import type { FPInputDescription } from '@/components/function-parameter/fp-input'
import type { FPComponent } from '@/components/function-parameter'
import draggable from 'vuedraggable'
import AddFPCDialog from '@/views/main/dev-tool/function-design/function-edit/AddFPCDialog.vue'

const json = ref<Array<FPComponent>>([
  {
    id: '1',
    type: 'input',
    description: {
      label: '最小值',
      placeholder: '请输入最小值',
      key: 'min'
    }
  },
  {
    id: '2',
    type: 'input',
    description: {
      label: '最大值',
      key: 'max'
    }
  },
  {
    id: '3',
    type: 'select',
    description: {
      label: '类型',
      key: 'max',
      defaultValue: 'a',
      options: [
        {
          label: '第一种',
          value: 'a'
        },
        {
          label: '第二种',
          value: 'b'
        }
      ]
    }
  }
])

const current = ref<{
  index: string
  fpc: FPComponent
}>()

function changeCurrent(index: string) {
  current.value = {
    index: index,
    fpc: json.value[index]
  }

  console.log(current.value)
}

const showAddFPCDialog = ref(false)

onMounted(() => {
  if (json.value.length > 0) {
    current.value = {
      index: json.value[0].id,
      fpc: json.value[0]
    }
  }
})
</script>

<template>
  <el-card class="function-design-function-edit">
    <template #header>
      <div class="header">
        <div class="title">
          Kafka读取&nbsp;<span class="class-name"
            >(site.biu.flink.function.source.KafkaStringSource)</span
          >
        </div>
        <div class="right-bar">
          <el-button type="primary"> 保存</el-button>
        </div>
      </div>
    </template>
    <el-row :gutter="40">
      <el-col :span="14">
        <div class="fp-preview">
          <div class="fp-title fp-expand-title">
            <div>
              算子参数预览
              <el-button
                type="primary"
                style="margin-left: 10px; --el-button-size: 20px; font-size: 12px"
                plain
                size="small"
                :icon="Plus as any"
                @click="showAddFPCDialog = true"
              >
                添加组件
              </el-button>
            </div>
            <div class="expand-help">
              <el-button
                color="var(--el-color-primary)"
                :icon="GameTwo as any"
                circle
                size="small"
              />
              拖动调整顺序
            </div>
          </div>
          <el-form label-width="auto">
            <transition name="flip-list">
              <draggable
                :list="json"
                item-key="id"
                v-bind="{
                  animation: 200,
                  group: 'description',
                  disabled: false,
                  ghostClass: 'ghost'
                }"
                hanle=".drag-handler"
              >
                <template #item="{ element }">
                  <div
                    @click="changeCurrent(element.id)"
                    class="fp-instance"
                    :class="{ 'fp-instance-active': current?.index === element.id }"
                  >
                    <f-p-input
                      class="fp-instance-item"
                      v-if="element.type === 'input'"
                      :description="element.description as FPInputDescription"
                    />
                    <f-p-select
                      class="fp-instance-item"
                      v-else-if="element.type === 'select'"
                      :description="element.description as FPSelectDescription"
                    />
                    <div class="edit-bar">
                      <el-button
                        class="drag-handler"
                        size="small"
                        circle
                        type="primary"
                        :icon="GameTwo as any"
                      />
                      <el-button size="small" circle type="danger" :icon="Delete as any" />
                    </div>
                  </div>
                </template>
              </draggable>
            </transition>
          </el-form>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="fp-config">
          <div class="fp-title">参数配置</div>
          <f-p-input-config
            v-if="current?.fpc.type === 'input'"
            :key="current.index"
            :description="current.fpc.description as FPInputDescription"
          />
          <f-p-select-config
            :key="current.index"
            v-if="current?.fpc.type === 'select'"
            :description="current.fpc.description as FPSelectDescription"
          />
        </div>
      </el-col>
    </el-row>
  </el-card>
  <add-f-p-c-dialog v-model="showAddFPCDialog" />
</template>

<style scoped lang="scss">
.function-design-function-edit {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      .class-name {
        font-size: 13px;
        font-weight: bolder;
      }
    }
  }

  .fp-title {
    padding-bottom: 10px;
    padding-right: 10px;
  }

  .fp-expand-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .expand-help {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--el-text-color-secondary);

      .el-button {
        --el-button-size: 17px;
        margin-right: 5px;
      }
    }
  }

  .fp-preview {
    .fp-instance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 10px;
      border-radius: 5px;
      margin: 2px 0;

      ::v-deep(.el-form-item) {
        margin-bottom: 0;
      }

      .fp-instance-item {
        flex-grow: 1;
      }

      .edit-bar {
        margin-left: 10px;
        display: flex;
        align-items: center;

        .drag-handler {
          cursor: move;
        }
      }
    }

    .fp-instance-active {
      background-color: var(--el-color-primary-light-9) !important;
    }
  }
}
</style>
